<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
    <li>1 - PHP中文网</li>
    <li>2 - PHP中文网</li>
    <li class="red">3 - PHP中文网</li>
    <li>4 - PHP中文网</li>
    <li class="red">5 - PHP中文网</li>
    <li id="info">6 - PHP中文网</li>
    <li>7 - <strong>PHP中文网</strong></li>
    <li>8 - <strong>PHP中文网</strong></li>
    <li>9 - 二级列表
        <ol>
            <li><strong>-列表项</strong></li>
            <li>-列表项</li>
            <li>-列表项</li>
        </ol>
    </li>
</ul>
</body>
<script>
    $(function () {
        // $("li").first().css("border","1px solid red");
        // $("li").last().css("border","1px solid gray");
        // $("li").eq(2).css("border","1px solid blue");
        //区间 不包含结束 0开始 省略第二个就是选择开始到结尾
        // $("li").slice(4,6).css("border","1px solid red");
        //最后三个
        // $("li").slice(-3).css("border","1px solid red");

    //    $("li").filter("red") 等价于 $("li.red")

         // $("li").filter(function (index) {
         //     return index % 2 == 0;
         // }).css("border","1px solid blue");

         // $("li").not(function (index) {
         //     return index % 2 == 0;
         // }).css("border","1px solid blue");

        // li下的所有strong
        // $("li").find("strong").css("border","1px solid blue");

        //下一个
        // $("#info").next().css("border","1px solid blue");
        //包含子孙
        // $("#info").nextAll().css("border","1px solid blue");
        //前一个
        // $("#info").prev().css("border","1px solid blue");
        //前面所有
        // $("#info").prevAll().css("border","1px solid blue");

        // 父级
        $("#info").parent().css("border","1px solid blue");


    })
</script>
</html>